<template>
  <div class="flex-center">
    <div style="width: 440px">
      <a-form-item required label="企业服务" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-select v-model="prodId" :options="options" placeholder="请选择" style="width: 343px" @change="onProdIdChange" />
      </a-form-item>
      <a-form-item required label="轮播图" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="custom-form-item-wrapper">
        <a-upload
          :fileList="fileList"
          name="files"
          action="/file/api/v1/general/upload/attachment"
          accept=".jpg, .jpeg, .png, .bmp, .gif"
          class="custom-upload"
          @change="onFileChange"
        >
          <div v-if="banner" class="pointer" style="width: 343px; height: 120px; border-radius: 4px; position: relative">
            <img :src="banner" style="width: 100%; height: 100%" />
          </div>
          <div
            v-else
            class="pointer"
            style="width: 343px; height: 120px; border: 1px dashed #e8e8e8; border-radius: 4px; padding: 16px; text-align: center"
          >
            <a-icon type="plus-circle" theme="filled" style="color: var(--primary); font-size: 24px" />
            <div class="fs12 tc-theme">上传图片</div>
            <div class="fs12 mt4" style="color: rgba(118, 120, 133, 1)">
              尺寸：343x120px,图片支持jpg，png格式文件，最多1个，大小不要超过5M。
            </div>
          </div>
        </a-upload>
        <div v-show="!prodId" class="mask" @click="beforeUploadClick" />
      </a-form-item>
    </div>
    <a-popconfirm title="删除后无法恢复，确定要删除吗？" @confirm="delItem">
      <a-button class="ml8" type="danger" size="small">删除</a-button>
    </a-popconfirm>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    options: {
      type: Array,
      default: () => []
    },
    target: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileList: [],
      prodId: undefined,
      banner: ""
    };
  },
  computed: {},
  watch: {},
  created() {
    this.prodId = this.target.productId;
    this.banner = this.target.banner;
  },
  mounted() {},
  methods: {
    onProdIdChange(value) {
      if (this.target.id) {
        this.$emit("edit", {
          id: this.target.id,
          productId: value,
          banner: this.banner
        });
      }
    },
    beforeUploadClick() {
      this.$message.warning("请先选择企业服务");
    },
    onFileChange({ file, fileList }) {
      this.fileList = fileList;
      if (file.status === "done" && file.response && file.response.data && file.response.data[0]) {
        this.banner = file.response.data[0];
        if (this.target.id) {
          this.$emit("edit", {
            id: this.target.id,
            productId: this.prodId,
            banner: this.banner
          });
        } else {
          this.$emit("add", {
            productId: this.prodId,
            banner: this.banner
          });
        }
      }
    },
    delItem() {
      this.$emit("del");
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .custom-form-item-wrapper {
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 6px;
    z-index: 99;
    height: 120px;
    width: 343px;
    cursor: pointer;
  }
}
::v-deep .custom-upload {
  display: block;
  width: 343px;
  height: 120px;
  .ant-upload-list {
    display: none !important;
  }
}
</style>
